<template>
  <div class="MarketPlace">
    <!-- 列表 -->
    <div class="tabList">
      <el-tabs v-model="activeName" class="tabs" :before-leave="beforeLeave">
        <el-tab-pane name="vanilla" label="个股香草">
          <vanilla></vanilla>
        </el-tab-pane>
        <el-tab-pane name="snowball" label="个股雪球">雪球</el-tab-pane>
        <!-- <el-tab-pane name="purchase" label="累购">累购</el-tab-pane> -->
        <el-tab-pane name="IndexVanilla" label="指数香草">指数香草</el-tab-pane>
        <el-tab-pane name="DirectionGivers" label="指数雪球">指数雪球</el-tab-pane>
        <el-tab-pane name="ihkstock" label="港股香草">港股香草</el-tab-pane>
        <!-- <el-tab-pane name="American" label="美股雪球">美股雪球</el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<script>
import vanilla from "@/components/MarketPlace/vanilla.vue";
export default {
  name: "MarketPlace",
  components: { vanilla },
  data() {
    return {
      activeName: "vanilla"
    };
  },
  mounted() {},

  methods: {
    beforeLeave(visitName) {
      if (visitName === "button") {
        return false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.MarketPlace {
  /deep/ .tabs {
    .el-tabs__content {
      padding: 0 16px 16px 27px;
    }
    .el-tabs__header {
      margin-bottom: 0;
      border-radius: 10px 10px 0 0;
      // margin-left: 16px;
      padding-left: 27px;
      background: #f7f7f7;
      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
      height: 70px;
    }
    .el-tabs__nav-wrap::after {
      height: 0;
    }
    .el-tabs__item {
      color: #999999;
      height: 70px;
      line-height: 70px;
      font-size: 16px;
      text-align: center;
    }
    .el-tabs__active-bar {
      // bottom: 10px;
      background-color: #000;
    }
    .is-active {
      color: #000;
    }
  }
}
</style>
